<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学习方法--详情</title>
    <style>
        .detail>h6 {
            color: #999;
        }

        .detail>p {
            text-indent: 30px;
            line-height: 2;

        }

        .coll_zan {
            text-align: center;
        }

        .coll,
        .zan {
            float: right;
        }

        .coll>p {
            color: #fedb55;
            margin: 0;
            margin-right:10px;
            font-size: 12px;
        }

        .zan>p {
            margin: 0;
            color: #f00000;
            font-size: 12px;
        }

        .coll>i {
            display: block;
            width: 20px;
            height: 20px;
            background: url(../image/w.png) no-repeat;
            margin-right:10px;
        }
        .zan>i {
            display: block;
            width: 20px;
            height: 20px;
            background: url(../image/rw.png) no-repeat;

        }
        .coll>i.on {
            background: url(../image/y.png) no-repeat;
        }
        .zan>i.on {
            background: url(../image/r.png) no-repeat;
        }



        h2{
            padding-top:20px;
            border-top:1px solid #ddd;
            font-size: 14px;
            text-align: center;
            padding-bottom:20px;
        }
        .other_idea{
            padding:0 10px;
        }
        .other_idea h6{
            color:#999;
            text-align: right;
        }
    </style>
</head>

<body>
   <div class="detail">
    <h3>${title}</h3>
    <h6>${time}</h6>
    <!--<h5>理解记忆法</h5>-->
    <p>${content}</p>
    <div class="coll_zan">
        <div class="zan">
            <i></i>
            <p id="zan_mount"></p>
        </div>
        <div class="coll">
            <i></i>
            <p id="coll_mount"></p>
        </div>
    </div>
    <div style="clear:both;"></div>
    <h2>猜你想要的</h2>
    <div class="other_idea">

    </div>
</div>
    <input type="hidden" class="idd" value="${id}">
	<input type="hidden" class="token" value="${token}">
    <input type="hidden" class="z" value="${isFabulous}">
    <input type="hidden" class="s"  value="${isCollection}">
    <input type="hidden" class="z_mount" value="${fabulous}" >
    <input type="hidden" class="s_mount" value="${collection}">


    <script src="../js/jquery-2.0.0.min.js"></script>
    <script>
        $(function () {
                var z=$('.z').val();
                var s=$('.s').val();
                var z_mount=$('.z_mount').val();
                var s_mount=$('.s_mount').val();
                if(z==0){
                    $('.zan').children('i').addClass('off').removeClass('on');
                }else if(z==1){ 
                    $('.zan').children('i').addClass('on').removeClass('off'); 
                }
                if(s==0){
                    $('.coll').children('i').addClass('off').removeClass('on');
                   
                }else if(s==1){
                    $('.coll').children('i').addClass('on').removeClass('off'); 
                    
                }
                $('#coll_mount').html(s_mount); 
                $('#zan_mount').html(z_mount); 
                console.log(1111)
                $('.coll').click(function () {
                     var idd=$('.idd').val();
                     var token=$('.token').val();
                    $.ajax({
                    type: "post",
                    url: "http://app.scjapp.com:8088/cuotigou/method/collectionAndFabulous",
                    data: {
                        id: idd,
                        token: token,
                        type: '1'
                    },
                    success: function (data) {
                     
                            console.log(data.data.isCollection); 
                            if (data.data.isCollection == 1) {                     
                                    $('.coll').children('i').addClass('on').removeClass('off');   
                                $('#coll_mount').html(data.data.collection);                             
                            }else{                             
                                    $('.coll').children('i').addClass('off').removeClass('on');
                                    $('#coll_mount').html(data.data.collection); 
                  }     
                    }
                })           
            })
            $('.zan').click(function () {
                 var idd=$('.idd').val();
                     var token=$('.token').val();
                    $.ajax({
                    type: "post",
                    url: "http://app.scjapp.com:8088/cuotigou/method/collectionAndFabulous",
                    data: {
                        id: idd,
                        token: token,
                        type: '2'
                    },
                    success: function (data) {
                       
                            if (data.data.isFabulous == 1) {                     
                                    $('.zan').children('i').addClass('on').removeClass('off');   
                                $('#zan_mount').html(data.data.fabulous);                             
                            }else{                             
                                    $('.zan').children('i').addClass('off').removeClass('on');
                                    $('#zan_mount').html(data.data.fabulous); 
                  }     
                    }
                })           
            })

            var idd=$('.idd').val();
//另外学习方法
        $.ajax({
            type:'post',
            url:'http://app.scjapp.com:8088/cuotigou/method/recommend',
            data:{
                id:idd
            },
            success:function(data){
                console.log(data)
                var token=$('.token').val();
                var other_idea='';
                for (var i = 0, len = data.data.length; i < len; i++) {
                    
                    var addtime=data.data[i].addTime;
                    var loca_id=data.data[i].id;
                var addTime=new Date(parseInt(addtime)).toLocaleString().replace(/:\d{1,2}$/,' ');
                other_idea+='<p>'+data.data[i].subtitle+'</p>'+'<h6>'+addTime+'</h6>';
                    $('.other_idea').on('click',function(){
   window.location.href='http://app.scjapp.com:8088/cuotigou/method/details?id='+loca_id+'&&token='+token;
})
                    }
                    $('.other_idea').html(other_idea);
                
            }
        })




        })
    </script>
</body>

</html>